Uso librería js para tokenizar desde front-end
Descripción General
La librería js.debi.pro permite integrar la tokenización de métodos de pago directamente desde el front-end de sus aplicaciones web, utilizando JavaScript. Esto facilita el desarrollo y hace más seguro el tratamiento de la información de los detalles del medio de pago, sea manejada de forma segura sin pasar por el servidor de la organización antes de ser enviada a Debi para la creación del token del método de pago.
Si bien podría realizarse la tokenización desde el front-end usando la Publishable API Key, se ofrece esta librería que simplifica el uso de la API de creación de métodos de pago y a futuro iremos documentando y agregando nuevas funcionalidades, como la posibilidad de crear un componente directamente en el front-end.
¿Qué hace la librería?
Por el momento publicamos solamente la funcionalidad de crear un método de pago, es decir tokenizarlo.
Si se envía una Publishable API Key, la librería envía el request a la API de Sandbox de Debi.
En cambio si se envía una Secret API Key, la librería envía el request a la API de Producción de Debi.
Reemplazar "pk_yourPublicKeyHere" con su propia clave pública de Debi. No usar la clave secreta, que no debe ser utilizada en el browser.
Ejemplo de Integración
El siguiente ejemplo muestra cómo utilizar js.debi.pro para integrar la tokenización de un método de pago desde el front-end utilizando Vanilla JavaScript, sin frameworks adicionales.
-
Ver html ejemplo que puedes descargar y ejecutar localmente: VER EJEMPLO
-
aquí el ejemplo en vivo en un
iframe:
En este ejemplo:
- Los detalles de la tarjeta (número, fecha de expiración y CVC) se recogen desde el formulario y se incluyen en el payload, con el mismo formato que requiere la API de creación de método de pago.
- Se utiliza la librería
js.debi.pro, utilizando el métodocreatePaymentMethodTokenque genera un token que representa método de pago de forma segura. - En caso de éxito, se muestra el token generado en un campo oculto, listo para ser enviado al backend de la organización para su uso en futuras transacciones.
Usos Comunes de la Tokenización desde el front-end
- Pagos en e-commerce: sitios web de comercio electrónico que buscan simplificar la experiencia de pago de sus clientes.
- Suscripciones y pagos recurrentes: Facilita el almacenamiento de métodos de pago para su uso en pagos recurrentes.
- Integraciones con formularios personalizados: Permite que cada organización tenga un control total sobre el diseño de su formulario de pago, mientras que la seguridad es gestionada por la librería de Debi.
Para más información sobre los parámetros disponibles, consulta la documentación de la API.